<template>
	<view>
		<view class="item" @tap="onItem(item)">
			<u--image :src="item.avatar" width="100%" height="110px" radius="7"></u--image>
			<view>
				<u--text :text="language=='zh'?item.shopname:item.shopname_copy ? item.shopname_copy : item.shopname" color="#000" size="16" bold margin="0 0 5px 0" lines="1"></u--text>
				<view class="blend">
					<view class="flex">
						<view class="grade">
							<image src="/static/image/grade.png"></image>
							<text class="grade_text">{{item.score_service||0}}</text>
						</view>
						<u--text :text="'距您'+item.location" color="#989898" size="12" margin="0px 0px 0px 10px"></u--text>
					</view>
					<u-tag text="有包间" style="margin-top: 0;" size="mini" v-if="item.is_box==1" bgColor="#edf7e2"
						color="#63962C" borderColor="#edf7e2"></u-tag>
				</view>
				<u--text :text="language=='zh'?item.city:item.city_copy?item.city_copy:item.city" color="#989898" size="13" lines="1" margin="0 0 10px 0"></u--text>
				<view class="sale">
					<u-tag v-if="item.comment" :text="item.comment" size="mini" bgColor="#fff1f1" color="#FF583E"
						borderColor="#fff1f1"></u-tag>
					<u-tag  :text="e.name" v-for="(e,eIndex) in item.coupon" :key="eIndex" size="mini"
						bgColor="#fff" color="#FF9A04" borderColor="#FF9A04"></u-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "storeItem",
		data() {
			return {

			};
		},
		props: {
			item: {
				type: Object,
				delete: {}
			}
		},
		computed:{
		 language() {
		 	return this._i18n.locale
		 },	
		},
		methods: {
			onItem(item) {
				this.$emit("goDetail", item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		background-color: #fff;
		border-radius: 18rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: grid;
		grid-template-columns: 110px auto;
		grid-column-gap: 20rpx;

		.blend {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.grade {
				width: 72rpx;
				height: 30rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.grade_text {
					position: absolute;
					top: 5rpx;
					right: 9rpx;
					color: #FFC205;
					font-size: 20rpx;
				}
			}
		}

		.sale {
			grid-column-gap: 20rpx;
			grid-row-gap: 20rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			max-height: 120rpx;
			overflow: hidden;
		}
	}
</style>
